<template>
  <div class="fx-card" :class="{'is-padding':isPadding}" :style="cardStyle">
    <div class="title fs16" v-if="title!==''||$slots.title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="content" :style="contentStyle">
      <slot name="default"></slot>
    </div>
    <div class="hide-wrapper" v-if="$slots.hide">
      <fx-transition-unfold>
        <div class="hide-content" v-if="hideShow">
          <div class="hide-inner">
            <slot name="hide"></slot>
          </div>
        </div>
      </fx-transition-unfold>
      <div class="hide-bar" @click="hideClick">
        <div class="center">
          <i class="mr5 fx-select-dropdown" :class="{active:hideShow}"/>
          <span>{{ hideShow ? '隐藏' : '显示' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'

export interface CardProps {
  title: string;
  isPadding: boolean;
  contentStyle: CSSStyleSheet;
  cardStyle: CSSStyleSheet;
}

export default defineComponent({
  name: 'card',
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    isPadding: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    contentStyle: {
      type: Object as PropType<CSSStyleSheet>,
      default: null
    },
    cardStyle: {
      type: Object as PropType<CSSStyleSheet>,
      default: null
    }
  },
  setup () {
    // 显示 / 隐藏 底部数据
    const hideShow = ref<boolean>(false)

    const hideClick = (): void => {
      hideShow.value = !hideShow.value
    }

    return {
      hideShow,
      hideClick
    }
  }
})
</script>
